<!doctype html>
<html>
<head>
	<meta content="width=device-width, initial-scale=1" name="viewport">
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="layer/layer.js" type="text/javascript"></script>
	<script src="js/cart.js" type="text/javascript"></script>
	<script src="js/header.js"></script>
</head>

<body>

<div class="header">
	<div class="container">
		<nav class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
				<button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse"
						  type="button">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<h1 class="navbar-brand">
					<a href="/index"></a>
				</h1>
			</div>

			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li>
						<!-- 如果flag == 1，下列元素的class="active" -->
						<a href="/index">首页</a>
					</li>

					<li class="dropdown">
						<!-- 如果flag == 2，下列元素的class="active" -->
						<a class="dropdown-toggle" data-toggle="dropdown" href="#">商品分类<b class="caret"></b></a>
						<ul class="dropdown-menu multi-column columns-2">
							<li>
								<div class="row">
									<div class="col-sm-12">
										<h4>商品分类</h4>
										<ul class="multi-column-dropdown" id="typeList">
											<li><a class="list" href="/goods_list">全部系列</a></li>
											<!-- todo：修改点1：下方将显示导航栏“商品分类”下拉菜单内的由管理员实现定义好的蛋糕系列名称 -->
										</ul>
									</div>
								</div>
							</li>
						</ul>
					</li>

					<li>
						<!-- 如果flag == 3 && t == 2，下列元素的class="active" -->
						<a href="/goodsrecommend_list?type=2">热销</a>
					</li>

					<li>
						<!-- 如果flag == 3 && t == 3，下列元素的class="active" -->
						<a href="/goodsrecommend_list?type=3">新品</a>
					</li>

					<!-- if user!=null，隐藏下列元素 -->
					<li id="registerUser">
						<!-- 如果flag == 10，下列元素的class="active" -->
						<a href="/user_register.jsp">注册</a>
					</li>

					<li>
						<!-- 如果flag == 9，下列元素的class="active" -->
						<a href="/user_login.jsp">登录</a>
					</li>

					<!-- if user==null，隐藏下列元素 -->
					<li id="orderList">
						<!-- 如果flag == 5，下列元素的class="active" -->
						<a href="/order_list">我的订单</a>
					</li>

					<li>
						<!-- 如果flag == 4，下列元素的class="active" -->
						<a href="/user_center.jsp">个人中心</a>
					</li>

					<li>
						<a href="/user_logout">退出</a>
					</li>

					<!-- 如果user==null||user!=null&&user.isadmin==false，隐藏下列元素 -->
					<li id="adminIndex">
						<a href="/admin/index.html" target="_blank">后台管理</a>
					</li>
				</ul>
			</div>
		</nav>

		<div class="header-info">
			<div class="header-right search-box">
				<a href="javascript:;">
					<span aria-hidden="true" class="glyphicon glyphicon-search"></span>
				</a>
				<div class="search">
					<form action="/goods_search" class="navbar-form">
						<input class="form-control" name="keyword" type="text">
						<!-- 如果flag == 7，下列元素的class="active" -->
						<button aria-label="Left Align" class="btn btn-default" type="submit">搜索</button>
					</form>
				</div>
			</div>

			<div class="header-right cart">
				<a href="javascript:location='goods_cart.html'">
					<!-- 如果flag == 8，下列元素的class="active" -->
					<span aria-hidden="true" class="glyphicon glyphicon-shopping-cart">
						<span class="card_num" id="orderAmount">
							<!-- 如果order!=null, innerText=order.amount, 否则innerText=0 -->
						</span>
					</span>
				</a>
			</div>
			<div class="clearfix"></div>
		</div>

		<div class="clearfix"></div>
	</div>
</div>

<script>
   $.get('/typeList', function (types) {
      if (types != null && types.length != 0) {
			// 修改点1（在导航栏的“商品分类”下拉菜单中，显示细分的蛋糕系列），已完成
         types.forEach(function (type) {
            var oldHtml = document.getElementById('typeList').innerHTML;
            var newHtml = oldHtml + `<li><a className="list" href="/goods_list?typeid=${type.id}">${type.name}</a></li>`;
            document.getElementById('typeList').innerHTML = newHtml;
         });
      }
   }, 'json');
</script>

</body>
</html>